<template>
    <div class="memberConsumption">
      <div class="memberConsumption-top">
        <van-row>
          <van-col span="8">
            <van-button  style="width:100%;background: #F7F7F7;border-radius: 0!important;" @click="dcshow=true">店仓<i class="iconfont icon-xia"></i></van-button>
          </van-col>
          <van-col span="8">
            <van-button  style="width:100%;background: #F7F7F7;border-radius: 0!important;" @click="grade=true">等级<i class="iconfont icon-xia"></i></van-button>
          </van-col>
          <van-col span="8">
            <van-button  style="width:100%;background: #F7F7F7;border-radius: 0!important;" @click="timeSlot=true">{{headerTime}}<i class="iconfont icon-xia"></i></van-button>
          </van-col>
        </van-row>
      </div>

      <!--店仓弹出层 resultPrev-->
      <van-popup v-model="dcshow"  @click-overlay="result=resultPrev"  :overlay="true" class="dc-mask" >

        <div class="stockList" style="overflow: scroll;height:88%;margin-bottom:10px;">
          <div v-if="stores.length==0" style="color:#ddd;padding:10px 0;">暂无店仓</div>
          <van-checkbox-group v-else v-model="result">
            <van-cell-group>
              <van-cell style="text-align: left;" v-for="(item,index) in stores"  :title="` ${item.name}`" :key="index" >
                <van-checkbox :name="item.id" @change="getDcFn"/>
              </van-cell>
            </van-cell-group>
          </van-checkbox-group>
        </div>

        <!--按钮-->
        <van-row >
          <van-col span="8" style="padding:0 10px;">
            <van-button class="maskBtn"  @click="result=[]">重置</van-button>
          </van-col>
          <van-col span="8" style="padding:0 10px;">
            <van-button  class="maskBtn"  @click="closeDc">取消</van-button>
          </van-col>
          <van-col span="8" style="padding:0 10px;">
            <van-button  type="primary" class="maskBtn"  @click="getDcFn">确定</van-button>
          </van-col>
        </van-row>
      </van-popup>

      <!--等级弹出层 gradeResultPrev-->
      <van-popup v-model="grade" @click-overlay="gradeResult=gradeResultPrev" class="dc-mask">

        <div style="overflow: scroll;height:87%;margin-bottom:10px;border-bottom:1px solid #ddd;">
          <div v-if="gradeList.length==0" style="color:#ddd;padding:10px 0;">暂无等级</div>
          <van-checkbox-group v-else v-model="gradeResult" >
            <van-cell-group>
              <van-cell style="text-align: left;" v-for="(item,index) in gradeList" :title="` ${item.level_name}`" :key="index" clickable>
                <van-checkbox :name="item.level" />
              </van-cell>
            </van-cell-group>
          </van-checkbox-group>
        </div>

        <!--按钮-->
        <van-row >
          <van-col span="8" style="padding:0 10px;">
            <van-button  class="maskBtn" @click="gradeResult=[]">重置</van-button>
          </van-col>
          <van-col span="8" style="padding:0 10px">
            <van-button   class="maskBtn"  @click="closeDengji">取消</van-button>
          </van-col>
          <van-col span="8" style="padding:0 10px">
            <van-button  type="primary"   class="maskBtn" @click="getGradeList">确定</van-button>
          </van-col>
        </van-row>


      </van-popup>

      <!--时间弹出层 timeSlotResultPrev-->
      <van-popup v-model="timeSlot" @click-overlay="timeSlotResult=timeSlotResultPrev" :overlay="true" class="timeMask">
        <div style="overflow: scroll;height:80%;margin-bottom:10px;">

          <van-radio-group v-model="timeSlotResult">
            <van-cell-group>
              <van-cell style="text-align: left;" v-for="(val,key) in timeSlotList" :key="key"  :title="val" clickable @click="timeCheckFn(key+1,key)">
                <van-radio :name="(key+1)" />
              </van-cell>
              <van-cell style="text-align: left;" title="自定义时间" clickable @click="timeSlotResult ='5',timeDate=true,headerTime='自定义'">
                <van-radio name="5" />
              </van-cell>
            </van-cell-group>
          </van-radio-group>

        </div>

        <!--按钮-->
        <van-row>
          <van-col span="12" style="padding:0 10px;">
            <van-button  class="maskBtn" @click="timeSlotResult=timeSlotResultPrev,timeSlot=false,headerTime=headerTimeprev">取消</van-button>
          </van-col>
          <van-col span="12" style="padding:0 10px;">
            <van-button  type="primary" class="maskBtn"  @click="getTsList">确定</van-button>
          </van-col>
        </van-row>

      </van-popup>

      <!--自定义时间的弹出层-->
      <van-popup v-model="timeDate" @click-overlay="timeSlotResult=''" :overlay="true" class="zdyMask" >
        <van-cell-group style="text-align: left">
          <van-cell title="开始时间" is-link :value="startCurrentDate" @click="startTimes=true"/>
        </van-cell-group>
        <van-cell-group  style="text-align: left">
          <van-cell title="结束时间" is-link :value="EndCurrentDate" @click="endTimes=true"/>
        </van-cell-group>
        <!--按钮-->
        <van-row style="margin-top:10px;">
          <van-col span="12" style="padding:0 10px;">
            <van-button  class="maskBtn" @click="timeDate=false,timeSlotResult=''">取消</van-button>
          </van-col>
          <van-col span="12" style="padding:0 10px;">
            <van-button  type="primary"  class="maskBtn" @click="getTimeDate">确定</van-button>
          </van-col>
        </van-row>
      </van-popup>

      <!--开始时间的弹出层-->
      <van-popup v-model="startTimes" class="stimeMask">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          :min-date="minDate"
          @confirm="startTimeFn"
          @cancel="startTimes=false"
        />
      </van-popup>
      <!--结束时间的弹出层-->
      <van-popup v-model="endTimes" class="stimeMask">
        <van-datetime-picker
          v-model="endCurrentDates"
          type="date"
          :min-date="minDate"
          @confirm="endTimeFn"
          @cancel="endTimes=false"
        />
      </van-popup>

      <div class="memberConsumption-content">

        <div id="main" style="height:300px;padding:0 10px;"></div>
        <!--消费金额排名表格-->
        <div style="border:1px solid #ddd;" class="tablesss">
          <van-row style="background: #ddd;">
            <van-col style="padding:5px 0;border-right:1px solid #ccc;" span="8">姓名</van-col>
            <van-col style="padding:5px 0;border-right:1px solid #ccc;" span="8">消费金额</van-col>
            <van-col style="padding:5px 0;" span="8">联系方式</van-col>
          </van-row>

          <van-row v-if="!memberAll.length" style="border:1px solid #ccc;border-top:0;">
            <van-col span="24" style="padding:10px 0;text-align: center;color:#ddd">暂无数据</van-col>
          </van-row>
          <van-row v-else v-for="(val,idx) in memberAll" :key="idx">
            <van-col style="padding:5px 0;border-right:1px solid #ccc;border-bottom:1px solid #ccc;line-height: 24px;" span="8">{{val.vip_name}}</van-col>
            <van-col style="padding:5px 0;border-right:1px solid #ccc;border-bottom:1px solid #ccc;line-height: 24px;" span="8">{{val.jinE}}</van-col>
            <van-col style="padding:5px 0;border-bottom:1px solid #ccc;line-height: 24px;" span="8">{{val.phone}}</van-col>
          </van-row>
        </div>



        <!--消费次数排名前十-->
        <div id="main2" style="height:300px;margin-top:20px;padding:0 10px;"></div>
        <div style="border:1px solid #ddd;" class="tablesss">
          <div style="display: flex;background: #ddd;">
            <div style="padding:5px 0;border-right:1px solid #ccc;width:33.3%">姓名</div>
            <div style="padding:5px 0;border-right:1px solid #ccc;width:33.3%">消费次数</div>
            <div style="padding:5px 0;width:33.3%">联系方式</div>
          </div>
          <van-row v-if="!memberCiAll.length" style="border:1px solid #ccc;border-top:0;">
            <van-col span="24" style="padding:10px 0;text-align: center;color:#ddd">暂无数据</van-col>
          </van-row>
          <div style="display: flex;" v-else v-for="(item,idx) in memberCiAll" :keyg="idx">
            <div style="padding:5px 0;border-right:1px solid #ccc;width:33.3%;border-bottom:1px solid #ccc;line-height: 24px;">{{item.vip_name}}</div>
            <div style="padding:5px 0;border-right:1px solid #ccc;width:33.3%;border-bottom:1px solid #ccc;line-height: 24px;">{{item.CS}}</div>
            <div style="padding:5px 0;width:33.3%;border-bottom:1px solid #ccc;line-height: 24px;">{{item.phone}}</div>
          </div>
        </div>



      </div>
      <!--返回按钮-->
      <backs></backs>

    </div>
</template>

<script>
  // var echarts = require('echarts');
  // 引入 ECharts 主模块
  var echarts = require('echarts/lib/echarts');
  // 引入柱状图
  require('echarts/lib/chart/bar');
  // 引入提示框和标题组件
  require('echarts/lib/component/tooltip');
  require('echarts/lib/component/title');
  import backs from "@/components/menu/backPrev";
  export default {
        name: "memberConsumption",
        components: {
          backs
        },
        data(){
          return {
            headerTime:'本周',
            headerTimeprev:'本周',
            dcshow:false,
            stores:[],//店仓
            result:[],//店仓复选框的值
            resultPrev:[],//记录值

            grade:false,//等级
            gradeList:[],//等级列表
            gradeResult:[],//等级复选框的值
            gradeResultPrev:[],//记录值

            timeSlot:false,//时间段
            timeSlotList:["本周","上周","本月","上月"],
            timeSlotResult:1,//时间段对应的下标值
            timeSlotResultPrev:1,//记录值

            timeDate:false,//自定义时间
            startCurrentDate:"",
            EndCurrentDate:"",

            startTimes:false,//开始时间弹出层
            minHour: 10,
            maxHour: 20,
            minDate: new Date(1900,1,1),
            maxDate: new Date(2050,12,31),
            currentDate: {},//当前时间

            endTimes:false,//结束时间弹出层
            endCurrentDates:{},//最终的结束时间

            //配置图表对应的值
            memberCishu:[],//消费次数
            memberJine:[],//消费金额
            memberArr:[],//会员数组
            memberAll:[],//会员消费金额综合排序(表格)
            memberCiAll:[],//会员消费次数综合排序(表格)

            charts:{},//接收图表对象
          }
        },
      methods:{
        timeCheckFn(type,idx){
          this.timeSlotResult = type
          this.headerTime = this.timeSlotList[idx]
        },
        echartsJE(){
          // console.log(this.gradeResult);
          var $this=this;
          this.$http.order.post('/saleTable/vipSale',{
            storeArr:$this.result,
            levelArr:$this.gradeResult,
            type:$this.timeSlotResult,
            start_time:$this.startCurrentDate,
            end_time:$this.EndCurrentDate
          })
            .then(function (response) {
              // console.log(response.data.data);
              $this.memberCishu=response.data.data.cishu;
              $this.memberJine=response.data.data.jine;
              $this.memberArr=response.data.data.vipArr;
              // $this.loadEchartsFn();
              // $this.loadEchartsFn2();
              $this.loadPublicFN("main",$this.memberJine,$this.memberArr,"消费金额前十排名","jinE");
              $this.loadPublicFN("main2",$this.memberCishu,$this.memberArr,"消费次数前十排名","CS");
            })
            .catch(function (error) {
              console.log(error);
            });
        },
        //加载图表
        loadPublicFN(obj,parameter,member,title,field){
          var dates=[];//添加对应的字段组合成新的数组
          var nameArr=[];//把所有名字存起来
          var jineArr=[];//第一个图表数据

          var ziduan="";
          var xiaoFei=""
          if(field=="jinE"){
            ziduan="shishou";
            xiaoFei="消费金额";
          }else{
            ziduan="cishu";
            xiaoFei="消费次数";
          }
          // console.log(parameter);
          for(var i=0;i<parameter.length;i++){
            if(member[parameter[i].vip_id]){
              member[parameter[i].vip_id][field]=parameter[i][ziduan];
              dates.push(member[parameter[i].vip_id]);
              // console.log(dates);
              nameArr.push(member[parameter[i].vip_id].vip_name);
              jineArr.push(member[parameter[i].vip_id][field]);
            }
          }

          if(ziduan=="shishou"){
            this.memberAll=dates;
          }else{
            this.memberCiAll=dates;
          }
          nameArr.reverse();
          jineArr.reverse();

          var myChart = echarts.init(document.getElementById(obj));
          this.charts=myChart;
          var option = {
            title:{
              text:title,
              x:'center',
              textStyle:{
                fontSize:12
              }
            },
            width:"90%",
            left: 'center',
            grid:{
              x:5,
              y:45,
              x2:25,
              y2:20,
              borderWidth:1,
              containLabel: true,
            },
            tooltip: {},
            color: ['#3398DB'],
            legend: {
              data:['']
            },
            yAxis: {
              data: nameArr
            },
            xAxis: {},
            series: [{
              name: xiaoFei,
              type: 'bar',
              center: ["50%","50%"],
              data: jineArr
            }]
          };
          myChart.setOption(option);
        },
        //获取所有店仓.和等级
        getDianCang(){
          var $this=this;
          this.$http.setting.get('store')
            .then(function (response) {
              var empId = localStorage.getItem('empId');
              if(empId && response.data.code){
                $this.$toast.fail('店仓'+response.data.message);
                $this.$router.go(-1)
                return;
              }
              $this.echartsJE();
              // console.log(response.data.data);
              // $this.stores=response.data.data;
              $this.stores=response.data.data.length>0?response.data.data:[];
            })
            .catch(function (error) {
              $this.$toast.fail('登陆过期，请重新登陆');
              console.log(error);
            });
          //获取会员等级
          this.$http.member.get('vipLevel')
            .then(function (response) {
              // console.log(response.data.data);
              var empId = localStorage.getItem('empId');
              if(empId && response.data.code){
                $this.$toast.fail(response.data.message);
                // $this.$router.go(-1)
                return;
              }
              $this.gradeList=response.data.data;
            })
            .catch(function (error) {
              console.log(error);
            });

        },
        //点击店仓确定按钮
        getDcFn(){
          this.dcshow=false;
          this.resultPrev=this.result;
          this.echartsJE();
        },
        // 取消按钮店仓
        closeDc () {
          this.dcshow=false;
          this.result=this.resultPrev;
        },
        //点击等级确定按钮
        getGradeList(){
          this.grade=false;
          this.gradeResultPrev=this.gradeResult;

          this.echartsJE();
        },
        // 等级的取消按钮
        closeDengji (){
          this.grade=false;
          this.gradeResult=this.gradeResultPrev;
        },
        //点击时间段确定按钮
        getTsList(){
          this.timeSlot=false;
          this.headerTimeprev = this.headerTime
          this.timeSlotResultPrev=this.timeSlotResult;
          this.echartsJE();
        },
        //自定义时间的弹出层的确定按钮
        getTimeDate(){
            this.timeDate=false;
            // console.log(this.startCurrentDate);
            // console.log("结束时间是"+this.EndCurrentDate);
        },
        //点击开始时间的确定按钮
        startTimeFn(){
          console.log(1);
          this.startTimes=false;
          var y = this.currentDate.getFullYear();
          var m = this.currentDate.getMonth() + 1;
          m = m < 10 ? '0' + m : m;
          var d = this.currentDate.getDate();
          d = d < 10 ? ('0' + d) : d;
          this.startCurrentDate=y+"-"+m+"-"+d;


        },
        //点击结束时间的确定按钮
        endTimeFn(){
          this.endTimes=false;
          var y = this.endCurrentDates.getFullYear();
          var m = this.endCurrentDates.getMonth() + 1;
          m = m < 10 ? '0' + m : m;
          var d = this.endCurrentDates.getDate();
          d = d < 10 ? ('0' + d) : d;
          this.EndCurrentDate=y+"-"+m+"-"+d;
        },
        //初始化时间值
        nowTime(){
          //获取开始时间
          var myDate = new Date();
          var mytime=myDate.getMonth();
          var y=myDate.getFullYear();
          var t=myDate.getDate();        //获取当前日(1-31)

          this.currentDate=new Date(y,mytime,t);
          this.endCurrentDates=new Date(y,mytime,t);
          //默认赋值
          this.startCurrentDate=y+"-"+(mytime+1)+"-"+t;
          this.EndCurrentDate=y+"-"+(mytime+1)+"-"+t;

        }
      },
      mounted(){
          this.getDianCang();
          this.nowTime();

      },
      beforeDestroy () {

        // this.charts.clear();

      }
    }
</script>

<style scoped>
  .memberConsumption{
    font-size: 14px;
    color:#666;
  }
  .tablesss{
    background: #fff;
  }
  .memberConsumption .van-cell{
    border-bottom:1px solid #e5e5e5;
  }
  .memberConsumption .van-cell:first-child{
    border-top:1px solid #e5e5e5;
  }
  .memberConsumption [class*=van-hairline]::after{
    border:0;
  }

  .memberConsumption-top{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    background: #fff;
    z-index:9;
  }
  .memberConsumption-content{
    margin-top:45px;
    margin-bottom:10px;
    padding:3px 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

  }

  .van-modal{
    z-index: 9999999!important;
  }

  .dc-mask{
    width:320px;padding:5px 0;height:426px;background: #fff!important;border-radius: 5px;
  }
  .maskBtn{
    width:100%;height:38px;line-height: 38px;
  }
  .timeMask{
    width:320px!important;padding:10px 0;height:auto;background: #fff!important;border-radius: 5px;
  }
  .zdyMask{
    width:320px!important;height:auto;padding:10px 0;background: #fff!important;border-radius: 5px;
  }
  .stimeMask{
    width:320px;height:auto;border-radius: 5px;
  }


</style>
